<template>
	<view>
		<view v-if="coupon.store" class="flex space alcenter mb30">
			<view class="flex alcenter">
				<image class="unio2o-store-logo" :src="coupon.store.logo"></image>
				<view  class="ml20 ft16 text-default">
					{{coupon.store.name}}
				</view>
			</view>
			<view class="ft14 text-notice">
				<text>距我</text>
				<text class="text-theme">{{coupon.store.distance}}</text>
			</view>
		</view>
		<view  class="unio2o-coupon-ad bg-w box-shadow pd30 flex space bdr16">
			<view class="flex space alcenter main">
				<view class="flex alcenter">
					<view class="text-theme text-center w50">
						<text class="ft22 ftw600" v-if="coupon.type == 1"><text class="ft14">￥</text>{{coupon.amount}}</text>
						<text class="ft22 ftw600" v-if="coupon.type == 2">{{coupon.discountRate * 10}}折</text>
						<text class="ft22 ftw600" v-if="coupon.type == 3">{{coupon.amount}}</text>
					</view>
					<view class="ml40">
						<view class="ft16 ftw600">{{coupon.title}}</view>
						<view class="mt10 ft14 text-notice">
							{{coupon.description}}
						</view>
						<view class="ft12 text-notice mt10">
							{{coupon.useInstructions}}
						</view>
					</view>
				</view>
				
				<view v-if="coupon.price > 0" class="btn ft14 text-w ftw600 text-center">￥{{coupon.price}}购</view>
				<view v-else class="btn ft14 text-w ftw600 text-center" @click="goCoupon(coupon)">免费领取</view>
			</view>		
			
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			type:{
				type:String,
				default:'free', // 
			},
			showStore:{
				type:Boolean,
				default:true
			},
			coupon: {
				type: Object,
				default: () => {
					return {
						
					}
				}
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			goCoupon(coupon){
				uni.setStorageSync('coupon', coupon)
				uni.redirectTo({
					url: '/pages/coupon/detail'
				})
			}
		}
	}
</script>

<style>
	.unio2o-coupon-ad{
		position: relative;
	}
	.unio2o-coupon-ad .type{
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		left: 0;
		top: 0;
	}
	.unio2o-coupon-ad .main{
		height: 172rpx;
		width: 100%;
	}
	.unio2o-coupon-ad .btn{
		width:160rpx;
		height:64rpx;
		background:#FF6D00;
		box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
		border-radius:32rpx;
		line-height: 64rpx;
	}
</style>